<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!--    <link th:href="../static/bootstrap/css/style.css" rel="stylesheet" type="text/css" media="all"/>-->
    <!-- Custom Theme files -->
<!--    <link href="../static/css/style.css" rel="stylesheet" type="text/css" media="all"/>-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>

    <style>
        /*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
        /* start editing from here */
        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
        article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
        ol,ul{list-style:none;margin:0;padding:0;}
        blockquote,q{quotes:none;}
        blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
        table{border-collapse:collapse;border-spacing:0;}
        /* start editing from here */
        a{text-decoration:none;}
        .txt-rt{text-align:right;}/* text align right */
        .txt-lt{text-align:left;}/* text align left */
        .txt-center{text-align:center;}/* text align center */
        .float-rt{float:right;}/* float right */
        .float-lt{float:left;}/* float left */
        .clear{clear:both;}/* clear float */
        .pos-relative{position:relative;}/* Position Relative */
        .pos-absolute{position:absolute;}/* Position Absolute */
        .vertical-base{	vertical-align:baseline;}/* vertical align baseline */
        .vertical-top{	vertical-align:top;}/* vertical align top */
        .underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
        nav.vertical ul li{	display:block;}/* vertical menu */
        nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
        img{max-width:100%;}
        /*end reset*/
        /*--login start here--*/
        body{
            background-color: palegoldenrod;
            /*background: url(../static/images/banner.jpg);*/
            padding:100px 0px 30px 0px;
            font-family: 'Roboto', sans-serif;
            font-size: 100%;
        }
        .login {
            width: 32%;
            margin: 0 auto;
        }
        .login h2 {
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            margin: 0px 0px 50px 0px;
            font-family: 'Droid Serif', serif;
        }
        .login-top {
            background: #E1E1E1;
            border-radius: 25px 25px 0px 0px;
            -webkit-border-radius:  25px 25px 0px 0px;
            -moz-border-radius: 25px 25px 0px 0px;
            -o-border-radius: 25px 25px 0px 0px;
            padding: 40px 60px;
        }
        .login-top h1 {
            text-align: center;
            font-size: 27px;
            font-weight: 500;
            color: #F45B4B;
            margin: 0px 0px 20px 0px;
        }
        .login-top input[type="text"] {
            outline: none;
            font-size: 15px;
            font-weight: 500;
            color: #818181;
            padding: 15px 20px;
            background: #CACACA;
            border: 1px solid #ccc;
            border-radius:25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -o-border-radius: 25px;
            margin: 0px 0px 12px 0px;
            width: 88%;
            -webkit-appearance: none;
        }
        .login-top input[type="password"]{
            outline: none;
            font-size: 15px;
            font-weight: 500;
            color: #818181;
            padding: 15px 20px;
            background: #CACACA;
            border: 1px solid #ccc;
            border-radius:25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -o-border-radius: 25px;
            margin: 0px 0px 12px 0px;
            width: 88%;
            -webkit-appearance: none;
        }
        .forgot  a{
            font-size: 13px;
            font-weight: 500;
            color: #F45B4B;
            display: inline-block;
            border-right: 2px solid #F45B4B;
            padding: 0px 7px 0px 0px;
        }
        .forgot  a:hover{
            color: #818181;
        }
        .forgot input[type="submit"] {
            background: #F45B4B;
            color: #FFF;
            font-size: 17px;
            font-weight: 400;
            padding: 8px 7px;
            width: 40%;
            display: inline-block;
            cursor: pointer;
            border-radius: 6px;
            -webkit-border-radius: 19px;
            -moz-border-radius: 6px;
            -o-border-radius: 6px;
            margin: 0px 7px 0px 3px;
            outline: none;
            border: none;
        }
        .forgot input[type="submit"]:hover {
            background:#818181;
            transition: 1s all;
            -webkit-transition: 1s all;
            -moz-transition: 1s all;
            -o-transition: 1s all;
        }
        .forgot {
            text-align: right;
        }
        .login-bottom {
            background: #E15748;
            padding: 40px 65px;
            border-radius: 0px 0px 25px 25px;
            -webkit-border-radius:  0px 0px 25px 25px;
            -moz-border-radius: 0px 0px 25px 25px;
            -o-border-radius: 0px 0px 25px 25px;
            text-align: right;
            border-top: 2px solid #AD4337;
        }
        .login-bottom h3 {
            font-size: 14px;
            font-weight: 500;
            color: #fff;
        }
        .login-bottom h3 a {
            font-size: 25px;
            font-weight: 500;
            color: #fff;
        }
        .login-bottom h3 a:hover {
            color:#696969;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }
        .copyright {
            padding: 150px 0px 0px 0px;
            text-align: center;
        }
        .copyright p {
            font-size: 15px;
            font-weight: 400;
            color: #fff;
        }
        .copyright p a{
            font-size: 15px;
            font-weight: 400;
            color: #E15748;
        }
        .copyright p a:hover{
            color: #fff;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }
        /*--login end here--*/
        /*--meadia quiries start here--*/
        @media(max-width:1440px){
            .login {
                width: 35%;
            }
        }
        @media(max-width:1366px){
            .login {
                width: 37%;
            }
        }
        @media(max-width:1280px){
            .login {
                width: 40%;
            }
        }
        @media(max-width:1024px){
            .login {
                width: 48%;
            }
            .copyright {
                padding: 100px 0px 0px 0px;
            }
        }
        @media(max-width:768px){
            .login {
                width: 65%;
            }
            .login-top h1 {
                font-size: 25px;
            }
            .login-bottom h3 a {
                font-size: 22px;
            }
            .copyright {
                padding: 250px 0px 0px 0px;
            }
            body {
                padding: 100px 0px 0px 0px;
            }
            .login h2 {
                font-size: 28px;
            }
        }
        @media(max-width:640px){
            .login-top h1 {
                font-size: 23px;
            }
            .forgot input[type="submit"] {
                font-size: 15px;
                width: 22%;
            }
            .login-top input[type="text"] {
                padding: 12px 20px;
            }
            .login-top input[type="password"] {
                padding: 12px 20px;
            }
            .login-bottom h3 a {
                font-size: 19px;
            }
            .login-bottom h3 {
                font-size: 13px;
            }
            .copyright {
                padding: 110px 0px 0px 0px;
            }
            body {
                padding: 110px 0px 0px 0px;
            }
        }
        @media(max-width:480px){
            .login {
                width: 80%;
            }
            .login-top h1 {
                font-size: 21px;
            }
            .login-top input[type="text"] {
                width: 85%;
            }
            .login-top {
                padding: 30px 40px;
            }
            .login-top input[type="password"] {
                width: 85%;
            }
            .login h2 {
                font-size: 25px;
            }
        }
        @media(max-width:320px){
            .login {
                width: 90%;
            }
            .login-top {
                padding: 20px 25px;
            }
            .login-top input[type="text"] {
                width: 81%;
                padding: 10px 20px;
                font-size: 13px;
                margin: 0px 0px 7px 0px;
            }
            .login-top input[type="password"] {
                width: 81%;
                padding: 10px 20px;
                font-size: 13px;
                margin: 0px 0px 7px 0px;
            }
            .forgot input[type="submit"] {
                font-size: 11px;
                width: 25%;
                padding: 6px 7px;
            }
            .forgot  a {
                font-size: 11px;
            }
            .login-bottom {
                padding: 20px 25px;
            }
            .login-bottom h3 {
                font-size: 11px;
            }
            .login-bottom h3 a {
                font-size: 17px;
            }
            body {
                padding: 50px 0px 0px 0px;
            }
            .copyright p {
                font-size: 13px;
            }
            .copyright p a{
                font-size: 13px;
            }
            .login h2 {
                font-size: 23px;
                margin:0px 0px 35px 0px;
            }
            .copyright {
                padding: 75px 0px 0px 0px;
            }
        }
        /*--meadia quiries end here--*/
    </style>
</head>
<!--<body>-->
<!--<div class="box1">-->
<!--    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">-->
<!--        <ol class="carousel-indicators">-->
<!--            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<!--            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>-->
<!--            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
<!--        </ol>-->
<!--        <div class="carousel-inner" style="border-radius: 20px">-->
<!--            <div class="carousel-item active">-->
<!--                <img th:src="@{/img/back3.jpg}" class="d-block w-100" alt="...">-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="carousel-item">&ndash;&gt;-->
<!--&lt;!&ndash;                <img th:src="@{/img/2.jpg}" class="d-block w-100" alt="...">&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--            <div class="carousel-item">-->
<!--                <img th:src="@{/img/3.jpg}" class="d-block w-100" alt="...">-->
<!--            </div>-->
<!--        </div>-->
<!--        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">-->
<!--            <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--            <span class="sr-only">Previous</span>-->
<!--        </a>-->
<!--        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">-->
<!--            <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--            <span class="sr-only">Next</span>-->
<!--        </a>-->
<!--    </div>-->
<!--</div>-->

<body style="background-repeat: no-repeat;background-size: 1550px 757px;background-image: url(/images/back3.jpg) ">
<!--<div th:background="back">-->
<!--    <img src="../static/img/back3.jpg" alt="...">-->
<!--</div>-->
<div class="login">
    <h2 style="color: #000000; font-weight: bolder;">欢迎来到图书馆</h2>
    <!--    <h1 style="margin-bottom: 40px">欢迎使用图书管理系统</h1>-->
    <div class="login-top">
        <form th:action="@{/login}" method="post">
            <div class="form-group">
                <label for="username" class="">用户名:</label>
                <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="password" class="">密码:</label>
                <input type="password" class="form-control" id="password" name="password">
            </div>
            <input type="submit" class="btn btn-primary btn-lg" value="登&nbsp;&nbsp;&nbsp;&nbsp;录"
                   style="margin-top: 60px">
        </form>
    </div>
    <div class="login-bottom">
        <a href="/register" th:size="240">点我进行注册</a>
    </div>
</div>
<div class="copyright">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</div>
</body>
</html>